<template>
  <div>
    <div>
      <!--面包屑导航-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>学生宿舍</el-breadcrumb-item>
        <el-breadcrumb-item>宿舍评分</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <el-tabs type="border-card"
                 @tab-click="draw">
          <el-tab-pane label="卫生文化情况">
            <el-table :data="tableData"
                      style="width: 100%">
              <el-table-column prop="time"
                               label="日期"
                               width="150">
              </el-table-column>
              <el-table-column prop="hygiene"
                               label="卫生得分"
                               width="100">
              </el-table-column>
              <el-table-column prop="culture"
                               label="文化得分"
                               width="100">
              </el-table-column>
              <el-table-column label="评分"
                               width="180">
                <template slot-scope="scope">
                  <el-rate disabled
                           v-model="scope.row.score"
                           show-score
                           text-color="#ff9900"
                           score-template="{value}">
                  </el-rate>
                </template>
              </el-table-column>
              <el-table-column prop="desc"
                               label="备注">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="可视化">
            <el-row>
              <el-col :span="12">
                <div class="bar"
                     ref="barRef"
                     style="width: 600px;height:500px;"></div>
              </el-col>
              <el-col :span="12">
                <div class="line"
                     ref="barLine"
                     style="width: 600px;height:500px;"></div>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'dormitoryHygiene',
  props: [''],
  created () {
    this.getCurrDormInspection()
  },
  data () {
    return {
      tableData: []
    }
  },

  methods: {
    async getCurrDormInspection () {
      const { data: res } = await this.$axios.get('/inspect/IPTNfind', {
        params: {
          tower: window.localStorage.getItem('tower'),
          dorm: window.localStorage.getItem('dorm')
        }
      })
      // console.log(res)
      if (res.meta.code === 200) {
        // this.$message.success(res.meta.msg)
        res.result.forEach(valid => {
          valid.score = Number(valid.score)
        })
        this.tableData = res.result
      } else {
        this.$message.warning(res.meta.msg)
      }
    },
    // 绘制柱形图
    drawBar () {
      const myChart = echarts.init(this.$refs.barRef)
      // const option = {}
      const data = this.tableData
      const source = []
      let arr = []
      data.forEach(valid => {
        arr.push(valid.time)
        arr.push(Number(valid.hygiene))
        arr.push(Number(valid.culture))
        source.push(arr)
        arr = []
      })
      source.reverse()
      source.unshift(['date', '卫生分', '文化分'])
      // console.log(source)
      const option = {
        legend: {
          show: true,
          data: ['卫生分', '文化分']
        },
        tooltip: {},
        dataset: {
          // 提供一份数据。
          source: source
        },
        xAxis: {
          type: 'category'
        },
        yAxis: {},
        series: [
          { type: 'bar' },
          { type: 'bar' }
        ]
      }
      myChart.setOption(option)
    },
    // 绘制折线图
    drawLine () {
      const myChart = echarts.init(this.$refs.barLine)
      const data = this.tableData
      const source = []
      let arr = []
      data.forEach(valid => {
        arr.push(valid.time)
        arr.push(Number(valid.score))
        source.push(arr)
        arr = []
      })
      source.reverse()
      // console.log(source)
      const option = {
        tooltip: {},
        dataset: {
          // 提供一份数据。
          source: source
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: [
          {
            type: 'line',
            markLine: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 点击tab，将图绘画出来
    draw () {
      this.drawBar()
      this.drawLine()
    }
  }

}

</script>
<style lang='' scoped>
</style>
